<template>
  <div class="Home_root">
    <el-container class="Home_container">
      <el-header class="Home_header">
        <Header @logOut="LogOut"></Header>
      </el-header>
      <el-container>
        <el-aside class="Home_Guide">
          <el-menu class="Menu" default-active="dash" router="true" background-color="#bacac6">
            <el-sub-menu index="1">
              <template #title>
                <span>仪表盘</span>
              </template>
              <el-menu-item-group title="仪表盘">
                <el-menu-item index="dash">网站数据</el-menu-item>
                <!-- <el-menu-item index="advertise">广告模块</el-menu-item> -->
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <span>用户创作</span>
              </template>
              <el-menu-item-group title="用户稿件">
                <el-menu-item index="examine">稿件审核</el-menu-item>
                <el-menu-item index="trends">动态审核</el-menu-item>
                <el-menu-item index="history">稿件管理</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <span>用户管理</span>
              </template>
              <el-menu-item-group title="用户管理">
                <el-menu-item index="account">
                  账号处理
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <span>平台管理</span>
              </template>
              <el-menu-item-group title="用户管理">
                <el-menu-item index="advertise">
                  广告平台
                </el-menu-item>
                <el-menu-item index="platform">
                  用户平台
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main class="Home_Main">
          <RouterView v-slot="{ Component }">
            <keep-alive>
              <transition>
                <component :is="Component"></component>
              </transition>
            </keep-alive>
          </RouterView>
        </el-main>
      </el-container>
    </el-container>
    <div class="Home_Bottom">
    </div>
    <div class="Home_Video_Root" v-if="videoStore.videoNeed">
      <MyVideo :id="xgPlayer" :Poster="videoStore.videoPoster" :Src="videoStore.videoURL"
         @close-video="videoStore.CloseVideoPlayer"
      ></MyVideo>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { RouterLink, RouterView, useRouter } from 'vue-router'
import MyVideo from '../components/MyVideo.vue';
import Header from '../components/Header.vue';
import { UserInfoStore } from '../stores/userInfo.js'
import { UserVideoStore } from '../stores/videoControl.js'
import { CustomerConfirm, CustomerMessage } from '../Util/Confirm.js';

const router = useRouter();
const store = UserInfoStore()
const videoStore=UserVideoStore()

onMounted(()=>{
  videoStore.CloseVideoPlayer()
})

const LogOut = () => {
  CustomerConfirm('是否退出登录', '警告', '确定', '取消', 'warning',
    () => {
      store.logout();
      router.push('/login')
    }, () => CustomerMessage('已取消', 'info'))
}

</script>

<style lang='less' scoped>
.Home_root {
  width: 100vw;
  height: 100vh;
  position: relative;

  .Home_container {
    position: relative;
    width: 100%;
    height: 100vh;
    border-bottom: 1px solid #ccc;
    z-index: 2;

    .Home_header {
      width: 100%;
      height: 10vh;
      border-bottom: 1px solid #ccc;
    }

    .Home_Guide {
      width: 20vw;
      // width: 15rem;
      height: 90vh;
      border-right: 1px solid #ccc;
      scrollbar-width: none;

      .Menu {
        height: 100%;
      }
    }

    .Home_Main {
      padding: 0 0 0.2rem 0;
      overflow: auto;
      width: 70vw;
      height: 90vh;
      margin-bottom: 1rem;
      scrollbar-width: none;
    }
  }

  .Home_Video_Root {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-45%, -45%);
    width: 100%;
    height: 100%;
    z-index: 999;
  }

}
</style>